<template>
  <div>
    <base-right-dialog
      ref="baseRightDialog"
      :footerShow="true"
      :appendBody="true"
      :dialogVisible.sync="drawer"
      :withHeader="false"
      title="权限分配"
      @handleClose="handleDialogClose"
      @handleConfirmClick="handleConfirmClick"
      :size="'60%'"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="功能权限" name="first">
          <el-table
            border
            ref="multipleTable"
            :data="menuDatas"
            row-key="id"
            tooltip-effect="dark"
            style="width: 100%"
            :default-expand-all="true"
            :default-checked-keys="keys"
            @select-all="selectAll"
            @select="handleSelectionChange"
            v-loading="buttonLoading"
          >
            <el-table-column
              type="selection"
              width="45"
              :reserve-selection="true"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="菜单名称"
              width="200"
            ></el-table-column>
            <el-table-column prop="buttonSelection" label="按钮">
              <template slot-scope="scope">
                <div style="display: flex;align-items: center">
                  <i
                    class="el-icon-star-on"
                    style="
                    height: 30px;
                    line-height: 30px;
                    font-size: 25px;
                    margin-right: 7px;
                    cursor: pointer;
                  "
                    v-show="btnShowHandle(scope.row.buttonList,true)"
                    @click="cancellation(scope.row.buttonList)"
                  ></i>
                  <i
                    class="el-icon-star-on"
                    style="
                    height: 30px;
                    line-height: 30px;
                    font-size: 25px;
                    margin-right: 7px;
                    color: #808080;
                    cursor: pointer;
                  "
                    @click="selectAllButton(scope.row.buttonList)"
                    v-show="btnShowHandle(scope.row.buttonList,false)"
                  ></i>
                  <el-checkbox v-model="item.check" v-for="item in scope.row.buttonList">{{ item.nameCh }}</el-checkbox>
                </div>


              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane
        >
        <el-tab-pane label="数据权限" name="second">
          <data-permissions ref="dataPermissions"></data-permissions>
        </el-tab-pane>
        <el-tab-pane label="首页拖拽权限" name="layOutAuth">
          <layOutPermissions ref="layOutPermissions"></layOutPermissions>
        </el-tab-pane>
      </el-tabs>
    </base-right-dialog>
  </div>
</template>

<script>
import baseRightDialog from '@/components/base/baseRightDialog'
import { PopedomSaveData, GetAllBilldata } from '@/api/apis/jurisdiction'
import dataPermissions from './dataPermissions.vue'
import layOutPermissions from './layOutPermissions.vue'
import loginVue from '../../../login.vue'
import { authApi } from '@/api/apis/auth'

export default {
  data() {
    return {
      drawer: false,
      multipleSelection: [],
      keys: [],
      isAllSelect: false,
      selected: false,
      childNode: false,
      build: '',
      activeName: 'first',
      dataPermissions: [],
      buttonLoading: false,
      menuDatas: []
    }
  },

  props: {
    menuData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  components: {
    baseRightDialog,
    dataPermissions,
    layOutPermissions
  },

  beforeUpdate() {
    this.handleTabClick()
  },

  computed: {
    // menuDatas: {
    //   // return JSON.parse(JSON.stringify(this.menuData));
    //   get: function () {
    //     return JSON.parse(JSON.stringify(this.menuData));
    //   },
    //   set: function (item) {
    //     return JSON.parse(JSON.stringify(item));
    //   },
    // },
  },

  methods: {
    //判断全选是否显示
    btnShowHandle(list, flag = false) {
      if (!list.length) return false
      let flagResult = list.every(item => {
        return item.check
      })
      if (flag) {
        return flagResult
      } else {
        return !flagResult
      }
    },
    // tab切换
    handleTabClick() {
      this.$nextTick(() => {
        this.$refs.multipleTable && this.$refs.multipleTable.doLayout()
      })
    },
    selectAllButton(item) {
      item.forEach(item => {
        item.check = true
      })
    },
    cancellation(item) {

      item.forEach(item => {
        item.check = false
      })
    },
    // 全选/取消全选
    selectAll() {
      let data = this.treeToArray(this.menuDatas)
      this.selected = !this.selected
      data.forEach((el, index) => {
        el.check = this.selected
        this.$refs.multipleTable.toggleRowSelection(el, this.selected)
      })
    },
    handleSelectionChange(val, row) {
      row.check = !row.check
    },
    // 默认选中
    exhibitList(menu, homeList, id) {
      this.$refs.layOutPermissions.homeList = homeList
      console.log(menu, 'menu')
      // let data = this.treeToArray(this.menuDatas);
      this.build = id
      // data.forEach((el, index) => {
      //   if (id.includes(el.id)) {
      //     this.$refs.multipleTable.toggleRowSelection(el, true);
      //   }
      // });
      this.menuCheckHandle(menu)
      this.menuDatas = menu
      console.log(this.menuDatas, 'this.menuDatas')
      this.buttonLoading = false
    },
    //数据处理
    menuCheckHandle(arr) {
      arr.forEach(item => {
        if (item.check) {
          this.$refs.multipleTable.toggleRowSelection(item, true)
        }
        if (item.children.length) {
          this.menuCheckHandle(item.children)
        }
      })
    },
    // 数据扁平
    treeToArray(items) {
      let children = []
      items.forEach((item) => {
        children.push(item)
        if (item.children) {
          children = children.concat(this.treeToArray(item.children))
        }
      })
      return children
    },
    handleDialogClose() {
      let data = this.treeToArray(this.menuDatas)
      data.forEach((el, index) => {
        this.$refs.multipleTable.toggleRowSelection(el, false)
      })
      this.changeMenu(this.menuDatas, 0)
      this.drawer = false
      this.$parent.permissionPopup = false
    },
    async handleConfirmClick() {
      let params = {
        id: this.build,
        kindId: 1,
        sysPopedomHomeEntities: [],
        sysPopedomMenuEntities: [],
        sysPopedomOperateEntities: []
      }
      this.homeListHandle(params.sysPopedomHomeEntities)
      this.menuListHandle(this.menuDatas, params.sysPopedomMenuEntities, params.sysPopedomOperateEntities)
      const res = await authApi("sysUserService","","saveJurisdiction","",params)
      if(res.status == '200'){
        this.handleDialogClose();
        this.$message({
          message: "保存成功",
          type: "success",
        });
      }
    },
    //处理首页拖拽
    homeListHandle(arr) {
      this.$refs.layOutPermissions.homeList.forEach(item => {
        if (item.check) {
          arr.push({ homeId: item.id })
        }
      })
    },
    //菜单数据处理
    menuListHandle(list, result, btnResult) {
      list.forEach(item => {
        if (item.check) {
          result.push({
            menuId: item.id
          })
        }
        if (item.children.length) {
          this.menuListHandle(item.children, result,btnResult)
        }
        if (item.buttonList.length) {
          this.btnListHandle(item.buttonList, btnResult, item.id)
        }
      })
    },
    //按钮选中处理
    btnListHandle(list, btnResult, menuId) {
      list.forEach(item => {
        if (item.check) {
          console.log(btnResult,'btnResult')
          btnResult.push({
            menuId,
            operate: item.id
          })
        }
      })
    },
    // 递归，添加选中按钮
    addToButtonList(arr, newArr) {
      newArr.forEach((newItem) => {
        this.addToButtonListRecursive(
          arr,
          newItem.op_MenuID,
          newItem.op_OperateKindList
        )
      })
      return arr
    },
    addToButtonListRecursive(arr, targetId, operateKindList) {
      for (let i = 0; i < arr.length; i++) {
        const item = arr[i]
        if (item.id == targetId) {
          let lists = operateKindList.split(',')
          lists.forEach((el) => {
            item.buttonList.push(parseInt(el))
          })
          return item
        }
        if (item.children && item.children.length > 0) {
          this.addToButtonListRecursive(
            item.children,
            targetId,
            operateKindList
          )
        }
      }
    },
    changeMenu(data, num) {
      let level = num
      level = level + 1
      data.forEach((el) => {
        el.buttonList = []
        el.type = false
        if (el.children != null && el.children && el.children.length) {
          this.changeMenu(el.children, level)
        }
      })
    },
    toFlatArray(tree, parentId) {
      return tree.reduce((t, _) => {
        const child = _[children]
        return [
          ...t,
          parentId ? { ..._, parentId } : _,
          ...(child && child.length ? toFlatArray(child, _[id]) : [])
        ]
      }, [])
    },
    getIds(flatArray) {
      let ids = [nodeId]
      let child = flatArray.find((_) => _[id] === nodeId)
      while (child && child.parentId) {
        ids = [child.parentId, ...ids]
        child = flatArray.find((_) => _[id] === child.parentId)
      }
      return ids
    },

    treeFindPath(tree, func, field = '', path = []) {
      if (!tree) return []
      for (const data of tree) {
        field === '' ? path.push(data) : path.push(data[field])
        if (func(data)) return path
        if (data.children) {
          const findChildren = this.treeFindPath(
            data.children,
            func,
            field,
            path
          )
          if (findChildren.length) return findChildren
        }
        path.pop()
      }
      return []
    }
  }
}
</script>
<style scoped lang="scss">
.rightDialog {
  height: 100%;
  padding: 0 16px;
}

::v-deep .cell {
  display: flex;
}

::v-deep .el-checkbox-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

::v-deep .el-checkbox {
  margin-right: 15px;
}

::v-deep .el-tabs__nav {
  transform: translateX(22px) !important;
}
</style>
